<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="/webdot/icon.png">
<title>WebDot Tutorial: Embedded SVG graph</title>
</head>
<body bgcolor="white">
<a href="/webdot/hedges.html">[previous]</a>
<a href="/cgi-bin/webdot/webdot/clientmap.html">[next]</a>
<font size="+2"><b>WebDot Tutorial: Embedded SVG graph</b></font>
<table><tr><td>
<iframe src="/cgi-bin/webdot/webdot/svgembed.dot.dot.svgz"
    width="140" height="280"
    frameborder="0" marginwidth="0" marginheight="0">
<object data="/cgi-bin/webdot/webdot/svgembed.dot.dot.svgz"
    width="140" height="280"
    type="image/svg+xml">
<embed src="/cgi-bin/webdot/webdot/svgembed.dot.dot.svgz"
    type="image/svg+xml"
    coding="gzip"
    palette="foreground">
</embed>
</object>
</iframe>
</td></tr></table>
WebDot can render graphs in SVG or SVGZ formats for use in
embedding.
For example this graph:
<table border="1"><tr><td><pre>
digraph G {
        node [URL="\N.html"]
        edge [URL="\E.html"]
        a -&gt; b -&gt; c
        a -&gt; c
}
</pre></td></tr></table>
<p>
can be generated with:
<table border=1><tr><td><pre>
&lt;iframe src="/cgi-bin/webdot/webdot/svgembed.dot.dot.svgz"
    width="140" height="280"
    frameborder="0" marginwidth="0" marginheight="0"&gt;
&lt;object data="/cgi-bin/webdot/webdot/svgembed.dot.dot.svgz"
    width="140" height="280"
    type="image/svg+xml"&gt;
&lt;embed src="/cgi-bin/webdot/webdot/svgembed.dot.dot.svgz"
    type="image/svg+xml"
    coding="gzip"
    palette="foreground"&gt;
&lt;/embed&gt;
&lt;/object&gt;
&lt;/iframe&gt;
</pre></td></tr></table>
<p>
This ugly hack of nesting &lt;embed&gt; inside &lt;object&gt; inside &lt;iframe&gt;
is needed at the moment to get embedded graphs to work in both Netscape and IE.
<p>
Note that edges are easily clickable in this format.
</body>
</html>
